document.addEventListener('DOMContentLoaded', function() {
    // 章节数据示例
    const chapters = [
        {
            id: 1,
            title: "第一章: 宇宙起源",
            description: "探索大爆炸理论的奥秘",
            image: "/images/test.jpg",
            prompts: [
                "模板1: 行星运动 - 如何描述地球的公转和自转？...",
                "模板2: 星系形成 - 星系是如何从原始气体云中形成的？..."
            ],
            codes: [
                "代码1: 行星轨道模拟 - function calculateOrbit() {...}",
                "代码2: 红移计算 - const redshift = ..."
            ]
        },
        // 更多章节数据...
    ];

    // DOM元素
    const chapterScroll = document.querySelector('.chapter-scroll');
    const searchInput = document.querySelector('.search-box input');
    
    // 渲染章节列表
    function renderChapters(chapters) {
        chapterScroll.innerHTML = chapters.map(chapter => `
            <div class="chapter-item" data-chapter="${chapter.id}">
                <div class="chapter-thumbnail">
                    <img src="${chapter.image}" alt="${chapter.title}">
                    <div class="chapter-overlay">
                        <h3>${chapter.title}</h3>
                        <p>${chapter.description}</p>
                    </div>
                </div>
            </div>
        `).join('');
        
        // 添加章节点击事件
        document.querySelectorAll('.chapter-item').forEach(item => {
            item.addEventListener('click', function() {
                const chapterId = parseInt(this.getAttribute('data-chapter'));
                const selectedChapter = chapters.find(c => c.id === chapterId);
                updateContent(selectedChapter);
            });
        });
    }
        
        // 添加章节点击事件
        document.querySelectorAll('.chapter-item').forEach(item => {
            item.addEventListener('click', function() {
                const chapterId = parseInt(this.getAttribute('data-chapter'));
                const selectedChapter = chapters.find(c => c.id === chapterId);
                updateContent(selectedChapter);
            });
        });
    }
    // 检查图片是否实际加载成功
document.querySelector('.chapter-thumbnail img').onload = function() {
    console.log('图片加载成功');
    this.style.border = '3px solid blue';
};
document.querySelector('.chapter-thumbnail img').onerror = function() {
    console.error('图片加载失败');
    this.style.border = '3px solid red';
};
function rebuildImage() {
    const img = document.querySelector('.chapter-thumbnail img');
    if (img) {
        const newImg = img.cloneNode(true);
        img.parentNode.replaceChild(newImg, img);
        console.log('图片节点已重建');
    }
}
document.addEventListener('DOMContentLoaded', rebuildImage);
    // 更新右侧内容
    function updateContent(chapter) {
        const promptsSection = document.querySelector('.content-card:nth-child(1)');
        const codesSection = document.querySelector('.content-card:nth-child(2)');
        
        // 更新提示词模板
        promptsSection.innerHTML = `
            <h2 class="card-title">提示词模板</h2>
            ${chapter.prompts.map((prompt, i) => `
                <div class="preview-item">
                    <h3>${prompt.split(' - ')[0]}</h3>
                    <p>${prompt.split(' - ')[1]}</p>
                    <a href="prompts.html?chapter=${chapter.id}" class="see-more">查看全部 →</a>
                </div>
            `).join('')}
        `;
        
        // 更新代码示例
        codesSection.innerHTML = `
            <h2 class="card-title">书中代码</h2>
            ${chapter.codes.map((code, i) => `
                <div class="preview-item">
                    <h3>${code.split(' - ')[0]}</h3>
                    <pre><code>${code.split(' - ')[1]}</code></pre>
                    <a href="code.html?chapter=${chapter.id}" class="see-more">查看全部 →</a>
                </div>
            `).join('')}
        `;
    }
    
    // 搜索功能
    searchInput.addEventListener('input', function() {
        const searchTerm = this.value.toLowerCase();
        const filteredChapters = chapters.filter(chapter => 
            chapter.title.toLowerCase().includes(searchTerm) || 
            chapter.description.toLowerCase().includes(searchTerm)
        );
        renderChapters(filteredChapters);
    });
    
    // 初始化
    renderChapters(chapters);
});